<template>
  <div class="login-box">
    <div class="item">
      <el-input
        placeholder="请输入用户名"
        prefix-icon="el-icon-user"
        v-model="userName" />
    </div>
    <div class="item">
      <el-input
        placeholder="请输入密码"
        prefix-icon="el-icon-lock"
        show-password
        v-model="password" />
    </div>
    <div class="btn-group">
      <el-button type="primary" @click="goLogin">登录</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex"

export default {
  name: "Home",
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  created() {
  },
  methods: {
    ...mapActions(["loginActions"]),
    // 登录
    goLogin() {
      this.loginActions({
        userName: this.userName,
        password: this.password
      }).then(res => {
        this.$router.push({
          path: '/'
        })
      })
    }
  }
};
</script>

<style lang="less" scoped>
.login-box {
  width: 500px;
  padding: 20px;
  border: solid 1px #cccccc;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  margin-top: 140px;
  border-radius: 4px;
  box-sizing: border-box;
  .item {
    margin-top: 20px;
    &:first-child {
      margin-top: 0;
    }
  }
  .btn-group {
    margin-top: 20px;
    text-align: center;
  }
}
</style>

